<section id="slider" class="carousel slide slider">
  <ol class="carousel-indicators">
	<li data-bs-target="#slider" data-slide-to="0" class="active"></li>
	<li data-bs-target="#slider" data-slide-to="1"></li>
	<li data-bs-target="#slider" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner" role="listbox">
	<div class="carousel-item active">
	  <div>
		<div class="carousel-caption d-none d-md-block text-start container">
		  <div class="caption-text float-start col-md-4">
			  <h1 class="font-weight-bold">Product 5 Pro 2.</h1>
			  <p class="font-weight-normal pb-4">Mobile ready, outstanding performance<br/> with gorgeous display</p>
			  <p><a class="btn  btn-outline-primary font-weight-bold px-5 py-2" href="#" role="button">Buy now  <i class="la la-arrow-end"></i></a></p>
		  </div>
		  <img src="img/ipad.png" loading="lazy" class="float-end col-md-8">
		</div>
	  </div>
	</div>
	<div class="carousel-item">
	  <img class="second-slide bg-body-tertiary" loading="lazy" alt="Second slide">
	  <div>
		<div class="carousel-caption d-none d-md-block container">
		  <h1>Another example headline.</h1>
		  <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
		  <p><a class="btn btn-lg btn-primary" href="#" role="button">Learn more</a></p>
		</div>
	  </div>
	</div>
	<div class="carousel-item">
	  <img class="third-slide bg-body-tertiary" loading="lazy" alt="Third slide">
	  <div>
		<div class="carousel-caption d-none d-md-block text-end container">
		  <h1>One more for good measure.</h1>
		  <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
		  <p><a class="btn btn-lg btn-primary" href="#" role="button">Browse gallery</a></p>
		</div>
	  </div>
	</div>
  </div>
  <a class="carousel-control-prev" href="#slider" role="button" data-slide="prev">
	<span class="carousel-control-prev-icon" aria-hidden="true"></span>
	<span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#slider" role="button" data-slide="next">
	<span class="carousel-control-next-icon" aria-hidden="true"></span>
	<span class="sr-only">Next</span>
  </a>
</section>


